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Question 1 [30 marks] 
Pasted below are the lines from the request and response in a websocket handshake. 


(1) 
(2) 
(3) 


GET /chat HTTP/1.1 
Host: server.example.com 
Upgrade: websocket 


(4) Connection: Upgrade 

(5) Sec-WebSocket-—Key: dGhlIHNhbXBsZSBub25jZQ== 
(6) Origin: http://example.com 

(7) Sec-WebSocket-—Protocol: chat, superchat 

(8) Sec-WebSocket—-Version: 


(9) HTTP/1.1 101 Switching Protocols 

(10) Upgrade: websocket 

(11) Connection: Upgrade 

(12) Sec-WebSocket—Accept: s3pPLMBiTxaQ9kYGzzhZRbK+x0o0= 
(13) Sec-WebSocket-—Protocol: chat 


a) 


b) 


Cc) 


d) 


g) 


h) 


Line (1) follows the format of an HTTP Request-Line. What are its three parts and what do 
they mean? [3 marks] 


Line (9) follows the format of an HTTP Status-Line. What are its three parts and what do they 
mean? [3 marks] 


Explain the meaning of the following lines: 


i. Line (2) [3 marks] 

ii. Line (6) [3 marks] 

Suggest two characteristics about the subsequent traffic over this TCP connection that will be 

different from HTTP traffic. [6 marks] 

How is line (12) generated, and what information is used in its generation? [3 marks] 

What is a heartbeat and why is it used in websockets? [3 marks] 
How should a websocket be closed, and why is this different from closing a TCP connection? 

[3 marks] 

What does the websocket protocol suggest about the default port that is used for websocket 


communication? [3 marks] 
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Question 2 [30 marks] 
You are part of a team designing a real-time anonymous voting room that will be implemented using 
HTTP, WebSockets, Play Framework and React.js. 


A user makes a request to the server, which creates a new voting room. This creates a unique URL to 
the room, which the user can (externally to the app) send to whoever should connect. The room 
operates like a real-time chat room, except that at any time anyone in the room can propose a motion 
to vote on. At this point, chat messages are paused, and all users in the room are asked to vote on the 
motion. When all users in the room have voted (or one minute has passed) the results are displayed to 
all users, and chat resumes. 


a) Design a web API for your application. For each request path, describe the method, path, any 
URL or query parameters, what a successful response from the server would be, and any 
special characteristics of that request path (for example, if it is a WebSockets path) 


For example: 


GET /?title={ title} 
Creates a new voting room with the given title. The room is created on the server, ready to 
accept connections. The server responds with a 302 Redirect to the URL of the newly created 
room (in the Location header), prompting the client to make a connection to the room. 

[10 marks] 


b) Design the message API (for the messages that would be sent over WebSockets) for this 
application. Use JSON for the format, and give an example of each message. [10 marks] 


c) Identify the main React.js components you will need to create in order to implement this app. 
For each component, give it a name, describe what data it acts upon, and an example of the 
HTML it would produce. (You may use JSX notation for the template, but syntax need not be 
precise). [10 marks] 


Question 3 [20 marks] 


a) Briefly explain the following Web security threats: 


i. Cross-site scripting [5 marks] 
li. SQL injection attacks [5 marks] 
ili. Session hijacking [5 marks] 


b) Describe two parameters that can be set on a Set-Cookie response header value to enhance the 
cookie’s security. For each parameter, explain how it improves the cookie’s security. 
[5 marks] 
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Question 4 [20 marks] 

a) Single Page Applications (SPAs) dynamically update the browser’s Document Object Model 
(DOM) as the user interacts with the page. React.js components only describe how to generate 
HTML representing their state, not what manipulations to make to the DOM as the program’s 
state changes. How does the React.js framework manage the state of the DOM to enable this? 


b) The build system for an SPA concatenates and minifies the JavaScript code. How do these two 
steps significantly improve the loading behaviour of the application, and what is minification? 
[5 marks] 


c) What is a source map, what is it produced by, and how is it useful for debugging client code in 
an SPA? [4 marks] 


d) A server makes a POST request to an API returning JSON data from a different server than the 
Origin. What sequence of HTTP requests, and which response headers for Cross-Origin 
Resource Sharing (CORS), are required for a modern browser to perform this request and 
provide access to the JSON response to the JavaScript code? [6 marks] 
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